<template>
    <div class="notice-container">
      <div class="notice-header">
        <h2>公告列表</h2>
      </div>
      <div class="notice-list">
        <el-card v-for="(notice, index) in noticeList" :key="index" class="notice-item">
          <div class="notice-title">{{ notice.noticeTitle }}</div>
          <div class="notice-content">{{ notice.noticeContent }}</div>
          <div class="notice-footer">
            <span class="notice-time">发布时间：{{ notice.createTime }}</span>
          </div>
        </el-card>
      </div>
    </div>
  </template>
  
  <script>
import { getNoticeList } from '@/api';

  export default {
    name: 'Notice',
    data() {
      return {
        noticeList: []
      }
    },
    mounted() {
        this.reqNotcieList();
    },
    methods: {
        reqNotcieList() {
            getNoticeList().then(res => {
                this.noticeList = res.rows;
            });
        }
    }
  }
  </script>
  
  <style scoped>
  .notice-container {
    padding: 20px;
  }
  
  .notice-header {
    text-align: center;
    margin-bottom: 20px;
  }
  
  .notice-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
  }
  
  .notice-item {
    transition: all 0.3s;
  }

  .notice-title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 10px;
  }
  
  .notice-content {
    color: #666;
    margin-bottom: 10px;
  }
  
  .notice-footer {
    color: #999;
    font-size: 14px;
  }
  </style> 